<template>
  <div class="car-tree-select sider">
    <div v-if="isCollapseOpen" class="sider-main">
      <div v-if="needCarHeader" class="sider-header">
        <div @click="getAllCarTree" class="header-item">
          <n-icon class="item-icon">
            <wx-icon name="car-allcar" />
          </n-icon>
          总数：{{ totalCarCount }}
        </div>
        <div class="header-item" @click="getOnlineCarTree">
          <n-icon class="item-icon">
            <wx-icon name="car-online" />
          </n-icon>
          在线：{{ getCarState.onlineCarCount }}
        </div>
        <!-- <div class="header-item">
          <a-icon
            class="item-icon"
            :component="carUnregisterIcon"
          >
          </a-icon>
          未登记上车：0
        </div>
        <div class="header-item">
          <a-icon
            class="item-icon"
            :component="carRedcodeIcon"
          >
          </a-icon>
          红码上车：0
        </div> -->
        <div class="header-item" @click="getOfflineCarTree">
          <n-icon class="item-icon">
            <wx-icon name="car-unline" />
          </n-icon>
          离线：{{ getCarState.offlineCarCount }}
        </div>
      </div>
      <div class="sider-opt">
        <div class="search">
          <n-input-group>
            <n-select
              default-value="all"
              :style="{ width: '40%', fontSize: '12px' }"
              :options="filterOptions"
            />
            <n-input placeholder="搜索驾驶员、车辆、企业" />
            <!-- <n-cascader :style="{ width: '33%' }" :options="cascaderOptions" /> -->
            <n-button type="primary"> 高级筛选 </n-button>
          </n-input-group>
          <!-- <a-input style="font-size: 12px !important" placeholder="搜索驾驶员、车辆、企业">
            <template #addonBefore>
              <a-select defaultValue="all" style="font-size: 12px">
                <a-select-option key="all" value="all"> 全部 </a-select-option>
                <a-select-option key="online" value="online"> 在线 </a-select-option>
                <a-select-option key="offline" value="offline"> 离线 </a-select-option>
              </a-select>
            </template>
          </a-input> -->
          <!-- <n-button style="margin-left: 10px; font-size: 12px" type="primary"> 高级筛选 </n-button> -->
        </div>
      </div>
      <div class="sider-tree">
        <a-tree
          ref="carTree"
          selectable
          :checkable="needCheckMode"
          v-model="carCheckeds"
          :tree-data="carTreeData"
          :expandedKeys="expandedKeys"
          @expand="onExpand"
          :autoExpandParent="autoExpandParent"
          @check="onCarCheck"
          @select="onCarClick"
        >
          <template style="font-size: 12px" #custom="item">
            <!-- v-if="item.type === 'car' && item.title.indexOf(searchValue) > -1" -->
            <div v-if="item.type === 'car'" style="font-size: 12px" @click="clickCar">
              <!-- 车辆 -->
              <div style="display: flex; align-items: center">
                <div
                  :style="{
                    fontSize: '16px',
                    filter: item.online ? '' : 'grayscale(100%)',
                    marginRight: '8px',
                  }"
                >
                  <a-icon style="font-size: 16px" :component="weihuaIcon" />
                  <!-- <weihua-icon style="filter: grayscale(100%);margin-right: 8px;width: 16px; height: 16px;" /> -->
                </div>
                <!-- <span v-html="item.title.replace(new RegExp(searchValue,'g'),'<span style=color:#f50>'+ searchValue +'</span>')" >{{ item.title }}</span> -->
                <span style="margin-left: 12px; color: #798090">{{ item.name }}</span>
                <div style="flex: 1; font-size: 16px; text-align: right">
                  <!-- <a-icon
                    @click="fitviewCar(item)"
                    :component="(item.online) ? locationSelectedIcon : locationUnselectedIcon"
                    :style="{ fontSize: '16px', marginRight: '4px' }"
                  /> -->
                  <div
                    :style="{
                      display: 'inline-block',
                      color: 'blue',
                      fontSize: '16px',
                      marginRight: '4px',
                    }"
                  >
                    <a-icon
                      :component="carDirectionIcon"
                      :style="{ transform: `rotate(${item.direction}deg)` }"
                      type=""
                    />
                  </div>
                  <a-icon
                    v-if="item.online && item.speed <= 0"
                    :component="carParkBlueIcon"
                    :style="{ color: 'blue', fontSize: '16px', marginRight: '4px' }"
                  />
                  <a-icon
                    v-if="needRealTime"
                    @click="openVideo(item)"
                    :component="
                      item.online && item.isVideoSum > 0 ? videoSelectedIcon : videoUnSelectedIcon
                    "
                    :style="{ fontSize: '16px', marginRight: '4px' }"
                  />
                  <a-icon
                    v-if="needRealTime"
                    @click="toStarCar(item)"
                    :component="item.isStar > 0 ? starSelectedIcon : starUnSelectedIcon"
                    :style="{ fontSize: '16px', marginRight: '4px' }"
                  />
                </div>
              </div>
            </div>
            <div style="font-size: 12px" v-if="item.type === 'folder'">
              <!-- 部门 -->
              <div style="display: flex; align-items: center">
                <folder-icon style="margin-right: 8px; width: 16px; height: 16px" />
                {{ item.title }}
              </div>
            </div>
          </template>
          <!-- <template slot='title' slot-scope={name}>
            <span v-html="name.replace(new RegExp(searchValue,'g'),'<span style=color:#f50>'+ searchValue +'</span>')"></span>
          </template> -->
        </a-tree>
      </div>
    </div>
    <div class="sider-footer">
      <div class="footer-main">
        <slot name="form"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';

  export default defineComponent({
    props: {
      carState: {
        type: Object,
        default: () => {
          return {
            onlineCarCount: 0,
            offlineCarCount: 0,
          };
        },
      },
    },
    setup(props) {
      const isCollapseOpen = ref(true); // 自身是否展开
      const needCarHeader = ref(true); // 是否需要头部
      const filterOptions = ref([
        {
          label: '全部',
          value: 'all',
        },
        {
          label: '在线',
          value: 'online',
        },
        {
          label: '离线',
          value: 'offline',
        },
      ]);
      const getCarState = computed(() => {
        // 车辆信息Object，从props传进来
        return props.carState;
      });
      const totalCarCount = 0; // 车辆总数
      return {
        filterOptions,
        totalCarCount,
        getCarState,
        needCarHeader,
        isCollapseOpen,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import url('./CarTreeSelect.less');
</style>
